<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="DisinfectStore.searchForm" :FormConfig />

    <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-select allowClear style="width:25%" placeholder="设备名称" :options="CommonStore.deviceOptions"
            v-model:value="DisinfectStore.searchForm.serial">
        </a-select>
        <a-range-picker allowClear style="width:60%" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"
            v-model:value="DisinfectStore.searchForm.TimeArr" :placeholder="['开始日期', '结束日期']" :disabledDate
            :defaultPickerValue="[dayjs().subtract(3, 'month'), dayjs().add(0, 'day')]" />
        <a-button @click="DisinfectStore.getDisinfectData">
            <template #icon>
                <SearchOutlined />
            </template>
        </a-button>
        <a-button @click="exportFormRef.open = true">
            <template #icon>
                <VerticalAlignBottomOutlined />
            </template>
        </a-button>
    </a-input-group>

    <a-card>
        <a-spin :spinning="DisinfectStore.loading">
            <a-table bordered :scroll :pagination="DisinfectStore.searchForm" :dataSource="DisinfectStore.tableData"
                :columns @change="DisinfectStore.getDisinfectData">

            </a-table>
        </a-spin>
    </a-card>


    <!-- 导出 -->
    <ModalForm ref="exportFormRef" type="export" :okFn="DisinfectStore.exportData"
        :FormValue="DisinfectStore.exportForm" :FormConfig="exportForm" :rules="exportRules" />
</template>
<script lang='ts' setup>
import dayjs from 'dayjs';
import { debounce } from 'lodash'
import { SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons-vue'
import { provide, ref, inject, type Ref, onUnmounted } from 'vue';
import { searchConfig, exportConfig, columns, searchSelfConfig } from '@/config/Disinfect'
import { useCommon } from '@/stores/Common';
import { useDisinfect } from '@/stores/Disinfect'
import { createForm } from '@/utils/CreateForm';
import { createBtns } from '@/utils/createPermissionBtns'
import { useTableScroll } from '@/utils/GetTableScroll';

const CommonStore = useCommon()
const DisinfectStore = useDisinfect()

const { FormConfig } = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { labelAlign: 'right', layout: 'inline', labelCol: { span: 5 } },)
const { FormConfig: exportForm, FormRules: exportRules } = new createForm(exportConfig)

DisinfectStore.getDisinfectData()

const exportFormRef = ref()
const scroll = useTableScroll('searchCard')

const disabledDate = (current: dayjs.Dayjs) => {
    const lastDate = dayjs().subtract(3, 'month')
    const tomorrow = dayjs().add(0, 'day')
    return (lastDate > current || tomorrow < current)
}


provide('permissionBtns', createBtns({
    query: debounce(() => { DisinfectStore.searchForm.pageNo = 1; DisinfectStore.getDisinfectData() }, 1000),
    exportAll: () => exportFormRef.value.open = true
}))

onUnmounted(() => {
    DisinfectStore.$reset()
})

</script>
<style lang='scss' scoped></style>